<template>
  <div class="container">
    <div class="flex">
      <div class="label">
        反馈时间:&nbsp;
      </div>
      <div class="flex-con">
        {{item.createTime|parseTime}}
      </div>
    </div>
    <div class="flex">
      <div class="label">
        反馈内容:&nbsp;
      </div>
      <div class="flex-con">
        {{item.content}}
      </div>
    </div>

    <div class="flex">
      <div class="label">
        联系方式:&nbsp;
      </div>
      <div class="flex-con">
        {{item.contacts||'--'}}
      </div>
    </div>

    <div class="flex flex-stretch">
      <div class="label">
        图片:&nbsp;
      </div>
      <div class="flex-con">
        <div class="img-items" v-if="item.imgSrcs && item.imgSrcs.length">
          <img :src="img|absUrl" alt="" class="img-item" v-for="img in item.imgSrcs" :key="img">
        </div>
        <div v-else>
          --
        </div>
      </div>
    </div>
    <div v-if="item.replyTime">
        <div class="flex">
      <div class="label">
        回复时间:&nbsp;
      </div>
      <div class="flex-con">
        {{item.replyTime|parseTime}}
      </div>
    </div>
    <div class="flex">
      <div class="label">
        回复内容:&nbsp;
      </div>
      <div class="flex-con">
        {{item.reply}}
      </div>
    </div>
    </div>
     
  </div>
</template>
<script>
  export default {
    data() {
      return {
        item: {}
      };
    },
    created() {
      let id = this.$route.query.id;
      this.showLoading();
      this.$get("/api/feedback_detail", {
          id
        })
        .then(data => {
          this.item = data;
          this.hideLoading();
        })
        .catch(() => {
          this.hideLoading();
        });
    }
  };

</script>

<style lang="scss" scoped>
  .container {
    line-height: 2em;
    font-size: 0.3467rem;
    padding: 0.4rem;
  }

  .img-items {
    .img-item {
      width: 2rem;
      margin-right: 0.4rem;
      margin-bottom: 0.4rem;
    }
  }

</style>
